<template>
  <div class="plugin-config-tax">
    <el-button type="primary" @click="form.open({})">
      {{ lang.t('common.create') }}
      <template #icon>
        <i class="iconfont mini icon-add-max"></i>
      </template>
    </el-button>
    <el-table :data="taxModel.getList()" style="width: 100%; margin-top: 20px">
      <el-table-column :label="plugin.lang('tax.sort')" prop="sort" />
      <el-table-column :label="plugin.lang('tax.name')" prop="name" />
      <el-table-column :label="plugin.lang('tax.iva')" prop="iva">
        <template #default="scope">
          {{ scope.row.iva }}%
        </template>
      </el-table-column>
      <el-table-column :label="plugin.lang('tax.req')" prop="req">
        <template #default="scope">
          {{ scope.row.req }}%
        </template>
      </el-table-column>
      <el-table-column :label="plugin.lang('tax.law')" prop="law">
        <template #default="scope">
          <el-tag v-if="Number(scope.row.iva) == 0">
            {{ plugin.lang('tax.law_text.' + scope.row.law) }}
          </el-tag>
          <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="200">
        <template #default="scope">
          <div style="text-align: right">
            <el-button type="primary" size="small" @click="form.open(scope.row)">{{ lang.t('common.update') }}</el-button>
            <el-popconfirm
              :title="lang.t('alert.delete')"
              @confirm="taxModel.del(scope.row.id)"
              confirmButtonType="danger"
              placement="left"
              hideIcon
            >
              <template #reference>
                <el-button type="danger" size="small">{{ lang.t('common.delete') }}</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Form ref="form" />
  </div>
</template>

<script>
import { ref } from 'vue'
import app from '@/app'
import taxModel from '../../model/tax'

import Form from './form'

export default {
  components: {
    Form
  },
  setup() {
    // 加载数据
    taxModel.get()

    // 表单
    const form = ref(null)

    return {
      lang: app.lang,
      plugin: app.plugin.index,
      taxModel,
      form
    }
  }
}
</script>